<template>
  <div>
    <h3 class="title">App组件</h3>
    <hr />
    <child1 :age="age" @onAddAge="addAge" />
    <hr />
    <child2 :age="age" />
  </div>
</template>

<script>
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
export default {
  components: {
    child1,
    child2
  },
  data() {
    return {
      age: 100
    }
  },
  created() {
    this.$eventBus.$on('age', value => (this.age += value))
  },
  methods: {
    addAge(n = 1) {
      this.age += n
    }
  },
  beforeDestroy(){
    this.$eventBus.$off('age')
  }
}
</script>

<style lang="scss" scoped></style>
